<template>
    <div class="mypagetool">
      <div class="mypage">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
  export default {
    // 定义自定义属性，接收分页数据
    // page：初始页
    // pageSize：每页显示多少数据
    // pageSizes：每页显示多少的方案数组
    // total：数据总条数
    props:{
        page:{
        default(){return 1},
        type:Number
      },
      pageSize:{
        default(){return 20},
        type:Number
      },
      total:{
        default(){return 0},
        type:Number
      },
      pageSizes:{
        default(){return [5, 10, 20, 50, 100]},
        type:Array()
      },
    },
    methods: {
      // 监听每页显示多少条数据
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.$emit('changepageSize',val)
      },
      // 监听页码值得变化
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.$emit('changepage',val)
      },
    },
  }
</script>

<style lang="less" scoped>
.mypage{
  display: flex;
  align-items: center;
  justify-content: center;
   background-color: #fff;
}
.mypagetool{
  position: relative;
    width:100%;
    box-sizing: border-box;
    padding-top: 22px;
    padding-bottom: 24px; 
    background: #fff;
}
</style>